import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './doctorhomepage.css'
import { AtList, AtListItem, AtGrid, AtButton } from "taro-ui"
import { $navigateTo, $redirectTo, getGlobalData } from '../../../../global';
import app from '../../../../main.js'
import reactMixin from 'react-mixin';
import myJs from './doctorhomepageJs.js'

export default class DoctorHomepage extends Component {

  config = {
    navigationBarTitleText: '医生主页'
  }
  constructor() {
    super(...arguments);
    this.state = this.getData();
  }

  init() {
    this.getDoctor();
    this.listChat();
  }

  go(url) {
    $navigateTo(url);
    console.log(this.state.chats);
  }
  go2(item, index) {
    if (index === 2) {
      app.navigateTo('../dongtaixiangqing/dongtaixiangqing');
    }
  }

  onReachBottom() {
    this.listChat();
  }

  clickFavour(chat_id, index, item, num) {
    if (num == 0) {
      var me = this;
      var chats = me.state.chats;
      app.post("web/dynamic_topic/likeDynamic", { chat_id: chat_id }, function (res) {
        var like = res.data.result;
        if (chats.items[index].id = chat_id) {
          if (like.is_like == '已点赞') {
            chats.items[index].likeNum += 1;
            chats.items[index].is_like = '已点赞'
          } else {
            chats.items[index].likeNum -= 1;
            chats.items[index].is_like = '未点赞'
          }
        }
        me.setState({
          chats: chats
        })
      });
    }
    if (num == 1) {
      var me = this;
      var chats = me.state.chats;
      app.post("web/dynamic_topic/collectDynamic", { chat_id: chat_id }, function (res) {
        var collect = res.data.result;
        if (chats.items[index].id = chat_id) {
          if (collect.is_collect == '已收藏') {
            chats.items[index].collectNum += 1;
            chats.items[index].is_collect = '已收藏'
          } else {
            chats.items[index].collectNum -= 1;
            chats.items[index].is_collect = '未收藏'
          }
        }
        me.setState({
          chats: chats
        })
      });
    }
    if (num == 2) {
      $navigateTo('../dongtaixiangqing/dongtaixiangqing?chat_id=' + chat_id);
    }
  }
  render() {
    let dianzan = app.imageUri + 'img/icon-dianzan.png'
    let nodianzan = app.imageUri + 'img/icon-dianzan-kong.png'
    let shoucan = app.imageUri + 'img/icon-shoucan-man.png'
    let noshoucan = app.imageUri + 'img/icon-shoucan-kong.png'
    return (
      <View className='doctor-homepage'>
        <View className='header'>
          <Image className='h-img' src={this.state.doctor.head_image}></Image>
          <View className='h-first'>{this.state.doctor.name}</View>
          <View className='h-second'>{this.state.doctor.positional_title + " | " + this.state.doctor.department}</View>
          <View className='h-third'>{this.state.doctor.hospital}</View>
          <View className='h-third'>
            简介：{this.state.doctor.summary}
          </View>
        </View>
        <View className='big-box'>
          {
            this.state.chats.items.map((item, index) => {
              return (
                <View className=' class_0' key={index}>
                  <AtList>
                    <AtListItem hasBorder={false} title={item.name} note={item.hospital} extraText={item.created_at} thumb={app.getPath(item.head_image)}></AtListItem>
                  </AtList>
                  <View className=' class_1'>
                    <View className='at-article ' onClick={this.go.bind(this, '../dongtaixiangqing/dongtaixiangqing')}>
                      <View className='at-article__p class_2'>{item.content}</View>
                    </View>
                    <View className=' class_3' onClick={this.go.bind(this, '../dongtaixiangqing/dongtaixiangqing')}>
                      {item.media_type == '图片' ?
                        <View className=' class_40' onClick={this.go.bind(this, '../dongtaixiangqing/dongtaixiangqing?chat_id=' + item.id)}>
                          {item.images.map((res, index) => {
                            return <Image className='class_41' src={res} mode='aspectFit'></Image>
                          })}
                        </View>
                        : (item.media_type == '视频' ?
                          <View className=' class_40'>
                            {
                              item.images.map((ve, index) => {
                                return (
                                  <video src={ve} poster={ve.video_img}></video>
                                )
                              })
                            }
                          </View>
                          : '')
                      }
                    </View>
                  </View>
                  <AtGrid
                    className='fun-box'
                    mode='rect'
                    onClick={this.clickFavour.bind(this, item.id, index)}
                    hasBorder={false}
                    columnNum={4}
                    data={[
                      { image: item.is_like == '已点赞' ? dianzan : nodianzan, value: item.likeNum },
                      { image: item.is_collect == '已收藏' ? shoucan : noshoucan, value: item.collectNum },
                      { image: app.imageUri + 'img/icon-comment-kong.png', value: item.commentNum },
                      { image: app.imageUri + 'img/icon-zhuangfa.png', value: item.transpondNum }]}>
                  </AtGrid>
                </View>
              )
            })
          }
        </View>
        <View className='blank-box'></View>
        {/* <View className='btn-box'>
          <AtButton full type='primary' className='add-friend'>添加好友</AtButton>
        </View> */}
      </View>
    )
  }
}
reactMixin.onClass(DoctorHomepage, myJs);
